<template>
  <div class="node-config-container">
    <a-tabs v-model="activeIndex" size="small">
      <a-tab-pane key="1" tab="样式">
        <a-form-model :model="form">
          <a-form-model-item label="名称">
            <a-select
              v-model="form.title"
              style="width: 100%"
              @change="handleLabel($event)"
              placeholder="请选择"
            >
              <a-select-option
                :value="item.dicItemCode"
                v-for="item in dataList"
                :key="item.dicItemCode"
              >
                {{ item.dicItemName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="字号">
            <a-input-number
              v-model="form.fontSize"
              placeholder="请输入"
              :min="12"
              :precision="0"
              @change="handleFontsize($event)"
            />
          </a-form-model-item>
        </a-form-model>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { Node } from "@antv/x6";
export default {
  name: "NodeConfigContainer",
  props: {
    node: Node,
    //下拉框数据
    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      curNode: Node,
      activeIndex: "1",
      form: {
        //标题
        title: undefined,
        //大小
        fontSize: "",
      },
    };
  },
  watch: {
    node(newValue) {
      this.curNode = newValue;
      this.getInitNodeData();
    },
    curNode(newValue) {
      this.$emit("updateData", newValue);
    },
  },
  methods: {
    getInitNodeData() {
      this.form.title = this.curNode.attrs.others
        ? this.curNode.attrs.others.code
        : this.curNode.attrs.text.text;
      this.form.fontSize = this.curNode.attrs
        ? this.curNode.attrs.text.fontSize
        : "";
    },

    // 修改node的标题
    handleLabel() {
      let { title } = this.form;
      if (!title) {
        return;
      }
      let currentItem = this.dataList.find((v) => v.dicItemCode == title);
      let { dicItemCode, dicItemName, dicItemRemark } = currentItem;
      this.curNode.setAttrs({
        others: {
          dicItemCode,
          dicItemName,
          dicItemRemark,
        },
      });
      this.curNode.setLabel(dicItemName);
    },

    // 修改node的字体大小
    handleFontsize() {
      let { fontSize } = this.form;
      this.curNode.setAttrs({
        text: {
          fontSize: Number(fontSize),
        },
      });
    },

    //重置表单
    resetForm() {
      this.form = {
        //标题
        title: undefined,
        //大小
        fontSize: "",
      };
    },
  },
};
</script>

<style lang="less" scoped>
.node-config-container {
  /deep/.ant-form {
    margin: 0 10px;
    .ant-form-item {
      display: flex;
      .ant-form-item-label {
        flex-shrink: 0;
        width: 40px;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        overflow: hidden;
      }
    }
  }
}
</style>
